/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use 'sass:map';
@use '../internal/styles' as styles;
@use '../internal/styles/tokens' as awsui;

$_variant-colors: (
  'normal': currentColor,
  'disabled': awsui.$color-text-interactive-disabled,
  'inverted': awsui.$color-text-inverted,
  'subtle': awsui.$color-text-icon-subtle,
  'warning': awsui.$color-text-status-warning,
  'error': awsui.$color-text-status-error,
  'success': awsui.$color-text-status-success,
  'link': awsui.$color-text-link-default,
);

$_icon-sizes: (
  (
    name: 'small',
    size: awsui.$size-icon-normal,
    supportedLineHeight: awsui.$line-height-body-s,
    stroke: 2px,
  ),
  (
    name: 'normal',
    size: awsui.$size-icon-normal,
    supportedLineHeight: awsui.$line-height-body-m,
    stroke: 2px,
  ),
  (
    name: 'medium',
    size: awsui.$size-icon-medium,
    supportedLineHeight: awsui.$line-height-heading-l,
    stroke: 1.6px,
  ),
  (
    name: 'big',
    size: awsui.$size-icon-big,
    supportedLineHeight: awsui.$line-height-heading-xl,
    stroke: 1.5px,
  ),
  (
    name: 'large',
    size: awsui.$size-icon-large,
    supportedLineHeight: awsui.$line-height-display-l,
    stroke: 1.333px,
  )
);

@mixin make-icon-sizes {
  @each $type in $_icon-sizes {
    $name: map.get($type, 'name');
    $size: map.get($type, 'size');
    $supportedLineHeight: map.get($type, 'supportedLineHeight');
    $stroke: map.get($type, 'stroke');
    $padding: calc((#{$supportedLineHeight} - #{$size}) / 2);

    &.size-#{$name} {
      inline-size: $size;
      box-sizing: border-box;
      &-mapped-height {
        block-size: $supportedLineHeight;
        padding-block: $padding;
        padding-inline: 0;
      }

      > svg,
      > img {
        inline-size: $size;
        block-size: $size;
        vertical-align: top;
      }

      > svg {
        &,
        * {
          stroke-width: $stroke;
        }
      }
    }
  }
}

@mixin make-icon-variants {
  @each $variant in map.keys($_variant-colors) {
    &.variant-#{$variant} {
      color: #{map.get($_variant-colors, $variant)};
    }
  }
}

@mixin style-svg {
  /* stylelint-disable selector-max-type, selector-max-universal */
  > svg {
    fill: none;

    * {
      stroke: currentColor;
    }

    // Designers count on these class names when exporting the new svgs
    :global {
      .stroke-linejoin-round {
        stroke-linejoin: round;
      }
      .stroke-linecap-square {
        stroke-linecap: square;
      }
      .stroke-linecap-round {
        stroke-linecap: round;
      }
      .filled {
        fill: currentColor;
      }
      .no-stroke {
        stroke: none;
      }
    }
  }
  /* stylelint-enable selector-max-type, selector-max-universal */
}
